<template>
  <view>
    <nav-bar page-title="立即开店"/>

    <u--form
        :model="storeInfo"
        labelPosition="left"
        ref="uForm"
        :rules="rules"
    >
      <view class="card padding-40 margin-30 flex-column">
        <view class="text-36 margin-bottom-40">填写信息</view>

        <u-form-item
            label="店铺名称"
            prop="name"
            borderBottom
            :labelWidth="80"
        >
          <u--input
              border="none"
              placeholder="请输入店铺名称"
              v-model="storeInfo.name"
          />
        </u-form-item>

        <!-- 地址-->
        <u-form-item
            label="地址"
            :labelWidth="80"
            prop="address"
        >
          <u--textarea v-model="storeInfo.address" placeholder="请输入店铺地址" autoHeight border="bottom"/>
        </u-form-item>

        <view class="flex-between">
          <view class="column">
            <u-form-item
                label="店铺经度"
                :labelWidth="80"
                prop="longitude"
            >
              <u--input
                  v-model="storeInfo.longitude"
                  placeholder="点击icon"
                  border="none"
                  disabled
                  disabledColor="#fff"
              />
            </u-form-item>
            <u-form-item
                label="店铺纬度"
                :labelWidth="80"
                prop="longitude"
            >
              <u--input
                  v-model="storeInfo.latitude"
                  placeholder="点击icon"
                  border="none"
                  disabled
                  disabledColor="#fff"
              />
            </u-form-item>
          </view>
          <view class="padding-20 bg-white" @click="getStoreAddress">
            <u-icon name="map-fill" size="22"
                    :color="storeInfo.longitude && storeInfo.latitude ? '#1073FF' : '#999999'"/>
          </view>
        </view>

        <!-- 老板名-->
        <u-form-item
            label="真实名称"
            :labelWidth="80"
            prop="person_name"
        >
          <u--input
              v-model="storeInfo.person_name"
              placeholder="请输入真实姓名"
              border="none"
          />
        </u-form-item>

        <u-form-item
            label="手机号"
            :labelWidth="80"
            prop="phone"
        >
          <u--input
              v-model="storeInfo.phone"
              placeholder="请输入手机号"
              type="number"
              :maxlength="11"
              border="none"
          />
        </u-form-item>

        <u-form-item label="代理商ID" :labelWidth="80" prop="agent_id">
          <u-input v-model="storeInfo.agent_id" placeholder="请输入代理商ID" type="number" :maxlength="11"
                   border="none"/>
        </u-form-item>
      </view>

      <view class="card padding-40 margin-30 flex-column">
        <view class="text-36">上传资料照片</view>

        <u-form-item
            label="店铺照片"
            prop="logo"
            :labelWidth="120"
        >
          <u-upload
              :width="150"
              :height="150"
              accept="image"
              :maxCount="1"
              :fileList="storeImage"
              @afterRead="(file) => uploadImage(file, 0)"
              @delete="(file)=>deleteImage(file, 0)"
              multiple
          />
        </u-form-item>

        <!-- 营业执照-->
        <u-form-item
            label="营业执照"
            prop="business_license"
            :labelWidth="120"
        >
          <u-upload
              :width="150"
              :height="150"
              accept="image"
              :maxCount="1"
              :fileList="businessLicenseImage"
              @afterRead="(file)=>uploadImage(file,1)"
              @delete="(file)=>deleteImage(file, 1)"
              multiple
          />
        </u-form-item>

        <!-- 身份证前面-->
        <u-form-item
            label="身份证前面"
            prop="id_front"
            :labelWidth="120"
        >
          <u-upload
              :width="150"
              :height="150"
              accept="image"
              :maxCount="1"
              :fileList="idFrontImage"
              @afterRead="(file) => uploadImage(file, 2)"
              @delete="(file)=>deleteImage(file, 2)"
              multiple
          />
        </u-form-item>

        <!-- 身份证后面-->
        <u-form-item
            label="身份证后面"
            prop="id_after"
            :labelWidth="120"
        >
          <u-upload
              :width="150"
              :height="150"
              accept="image"
              :maxCount="1"
              :fileList="idAfterImage"
              @afterRead="(file) => uploadImage(file, 3)"
              @delete="(file)=>deleteImage(file, 3)"
              multiple
          />
        </u-form-item>
      </view>
    </u--form>

    <view class="margin-30">
      <u-button type="primary" size="large" shape="circle" @click="storeInfoSubmit" text="提交"/>
    </view>
    <view style="height: 100rpx;"/>
  </view>
</template>

<script>
import NavBar from "@/components/nav-bar/nav-bar.vue";
import appConfig from "@/config/config";
import tips from "@/utils/tips";
import {addStore} from "@/services/store/store";
import {mapActions} from "vuex";

export default {
  name: "add-store",
  components: {NavBar},
  data() {
    return {
      storeImage: [],
      businessLicenseImage: [],
      idFrontImage: [],
      idAfterImage: [],

      storeInfo: {
        logo: '',
        name: '',
        address: '',
        business_license: '',
        id_front: '',
        id_after: '',
        person_name: '',
        phone: '',
        agent_id: null,
        longitude: null,
        latitude: null
      },

      rules: {
        'logo': {
          type: 'string', required: true, message: '请上传店铺照片',
        }, 'name': {
          type: 'string', required: true, message: '请填写店铺名',
        }, 'address': {
          type: 'string', max: 256, required: true, message: '请填写地址',
        }, 'longitude': {
          type: 'number', required: true, message: '请点击icon获取店铺当前经度',
        }, 'latitude': {
          type: 'number', required: true, message: '请点击icon获取店铺当前维度',
        }, 'agent_id': {
          type: 'number', required: true, message: '请填写代理商ID',
        }, 'business_license': {
          type: 'string', required: true, message: '请上传营业执照',
        }, 'id_front': {
          type: 'string', required: true, message: '请上传身份证正面',
        }, 'id_after': {
          type: 'string', required: true, message: '请上传身份证后面',
        }, 'person_name': {
          type: 'string', min: 3, max: 64, required: true, message: '请输入您的真是姓名',
        }, 'phone': {
          type: 'string', pattern: /^[1][3-9][0-9]{9}$/, min: 7, max: 11, required: true, message: '请输入电话号码',
          transform(value) {
            return String(value);
          },
        },
      },
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs.uForm.setRules(this.rules);
    });
  },
  methods: {
    ...mapActions(['account']),
    // 获取当前位置
    getStoreAddress() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          const {longitude, latitude} = res
          this.storeInfo.longitude = longitude
          this.storeInfo.latitude = latitude
          tips.toast('获取当前位置成功')
        }, fail(err) {
          console.log('getLocation', err)
        }
      });
    },
    // 上传和删除店铺照片
    uploadImage(fileData, index) {
      console.log(fileData)
      const {file} = fileData

      console.log(file)
      uni.uploadFile({
        url: appConfig.api + 'upload/file/store', // 仅为示例，非真实的接口地址
        filePath: file[0].url,
        file: file[0],
        fileType: 'image',
        formData: {
          is_black_white: "false"
        },
        name: 'file',
        success: (result) => {
          const res = JSON.parse(result.data)
          const {url, file_path} = res.data
          const fileList = [{url}]
          if (index === 0) {
            this.storeImage = fileList
            this.storeInfo.logo = file_path
          } else if (index === 1) {
            this.businessLicenseImage = fileList
            this.storeInfo.business_license = file_path
          } else if (index === 2) {
            this.idFrontImage = fileList
            this.storeInfo.id_front = file_path
          } else if (index === 3) {
            this.idAfterImage = fileList
            this.storeInfo.id_after = file_path
          }
        }, fail(err) {
          console.log(err)
        }
      });
    },
    deleteImage(file, index) {
      if (index === 0) {
        this.storeImage = []
      } else if (index === 1) {
        this.businessLicenseImage = []
      } else if (index === 2) {
        this.idFrontImage = []
      } else if (index === 3) {
        this.idAfterImage = []
      }
    },

    // 提交
    storeInfoSubmit(e) {
      console.log(this.storeInfo)
      this.$refs.uForm.validate().then(async validationResult => {
        if (!validationResult) {
          uni.$u.toast('缺少参数');
          return;
        }

        let data = this.storeInfo

        data.id_image = [data.id_after, data.id_front];
        console.log(data);
        const response = await addStore(data);
        if (response.code === 200) {
          this.$store.dispatch('account')
          await uni.switchTab({url: '/pages/index/index'})
          tips.toast(response.msg);
          return;
        } else {
          tips.toast(response.msg);
        }
        uni.$u.toast(response.msg);
      }).catch(errors => {
        uni.$u.toast('表单验证失败');
      });
    }

  },
}
</script>

<style lang="scss">

</style>
